<template>
	<view class="content">
		<view class="list_box">
			<view class="list_item" v-for="(item,index) in ClassList" :key="index" @click="goList(item.id)">
				<view class="list_item_l">
					<view class="list_item_l_title">{{item.title}}</view>
					<view class="list_item_ms">{{item.classname}}</view>
				</view>
				<view class="list_item_r"><image :src="item.image" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ClassList:{
					0:{
						id:1,
						title:'考试',
						classname:'全真模拟',
						image:'../../static/image/tmlx_img_qzmo@2x.png'
					},
					1:{
						id:2,
						title:'考试',
						classname:'考前预测',
						image:'../../static/image/tmlx_img_kqyc@2x.png'
					},
					2:{
						id:3,
						title:'刷题',
						classname:'综合能力',
						image:'../../static/image/tmlx_img_zhnl@2x.png'
					},
					3:{
						id:4,
						title:'刷题',
						classname:'专业知识',
						image:'../../static/image/tmlx_img_zyzs@2x.png'
					},
					4:{
						id:5,
						title:'刷题',
						classname:'英语能力',
						image:'../../static/image/tmlx_img_yynl@2x.png'
					},
					5:{
						id:6,
						title:'刷题',
						classname:'IT类知识',
						image:'../../static/image/tmlx_img_itzs@2x.png'
					},
					6:{
						id:7,
						title:'刷题',
						classname:'每月时政',
						image:'../../static/image/tmlx_img_mesz@2x.png'
					},
					7:{
						id:8,
						title:'测试',
						classname:'认知能力& 性格测试',
						image:'../../static/image/tmlx_img_rznl@2x.png'
					},
					8:{
						id:9,
						title:'刷题',
						classname:'历年真题',
						image:'../../static/image/addimg.png'
					}
				},
				classid:''
			
			}
		},
		onLoad(option) {	
			this.classid=option.classid
			
		},
		methods: {
			goList(id){
				uni.navigateTo({
					url:'testList?typeid='+id+'&classid='+this.classid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #FFFFFF;
		border-top: 1rpx solid #F5F5F5;
		.list_box{
			width: 100%;
			height: auto;
			margin-top: 40rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			.list_item{
				width: 334rpx;
				height: 180rpx;
				border: 1rpx solid #CCCCCC;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 20rpx;
				.list_item_l_title{
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.list_item_ms{
					width: 120rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-top: 15rpx;
				}
				.list_item_r image{
					width: 134rpx;
					height: 134rpx;
				}
			}
		}
	}

	

	
	
	
</style>
